
import React, { Component,  } from 'react'
import PropTypes from 'prop-types'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { Drawer, List,Menu, ActivityIndicator,  } from 'antd-mobile';
import * as Actions from '../../actions/shop'


 
class Container extends Component {
  static contextTypes={
    router:PropTypes.object.isRequired,
  }
  static defaultProps = {
    defaultValue:'',
  }
  static propTypes={
    onTouch : PropTypes.func,
    defaultValue : PropTypes.string
  }
  constructor(props) {
    super(props);
    /*
    open：是否展开分类列表
     */
    this.state = {
      open:false
    };
  }
  componentDidMount(){
   let {actions} = this.props
    actions.getCateList({})
  }
  onOpenChange = (...args) => {
    this.setState({ open: !this.state.open });
  }
  //分类菜单变化
  onChange = (value) => {
    let {actions} = this.props
    if(value == this.props.selectedCate)
      return
    actions.setSelectedCate(value)
    if(this.context.router.history.location.pathname=='/cate')
    {
      this.setState({ open: false ,value});
      
    }else{
       this.context.router.history.push(`/cate`)
    }
   
  }
  
  onMaskClick = () => {
    this.setState({ open: false });
  }
  
  render(){
    let {cateList,selectedCate,className} =this.props
    let pathname =this.context.router.history.location.pathname
    const menuEl = (
      <section>
      <div className="menu-mask" onClick={this.onMaskClick} />
      <Menu
        className="foo-menu"
        data={cateList}
        value={selectedCate }
        onChange={this.onChange}
        height={document.documentElement.clientHeight * 0.6}
      />
      </section>
    );
    const loadingEl = (
      <div style={{ width: '100%', height: document.documentElement.clientHeight * 0.6, display: 'flex', justifyContent: 'center' }}>
        <ActivityIndicator size="large" />
      </div>
    );
    return(
      <div className={`${className||''} zcontainer`}>
      <div className='top'>
        <div className='destop'>
           <div className='zheader-l'>
            <i className="iconfont icon-fenlei" onClick={this.onOpenChange}></i>
            <img className="nav-logo" src={require('../../assets/images/logo.png')} onClick={()=>{ this.context.router.history.replace('/home') }} />
           </div>
           <div className='zheader-c'>
            
           </div>
           <div className='zheader-l'>
            {/*<span className='username'>Sign in</span>*/}
            <i className="iconfont icon-wode" onClick={()=>{
              if(pathname == '/account')
                return
              this.context.router.history.push('/account')
            }}></i>
            <i className="iconfont icon-gouwuche01" onClick={() =>{
              if(pathname == '/cart')
                return
              else
                this.context.router.history.push('/cart')
            }}></i>
           </div> 
        </div>
        {/*<div className='backnav' onClick={()=>{this.context.router.history.goBack()}}>
         <i className="iconfont icon-fanhui"></i>goBack
        </div>*/}
        </div>
        <Drawer
          className="my-drawer"
          // style={{ minHeight: document.documentElement.clientHeight }}
          enableDragHandle
          contentStyle={{ color: '#A6A6A6', textAlign: 'center', paddingTop: 55 }}
          sidebar={menuEl}
          open={this.state.open}
          onOpenChange={this.onOpenChange}
        >
          {this.props.children}
        </Drawer>
      </div>
    )
  }
}

function mapStateToProps(state){
  return {
    cateList:state.cateList.toJS(),
    selectedCate:state.selectedCate.toJS()
  }
}
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(Actions, dispatch)
  }
}
export default  connect(
  mapStateToProps,
  mapDispatchToProps
)(Container)











